<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <van-nav-bar fixed>
        <template #left>
          <img src="@/assets/toutiao_logo.png" alt="" class="logo">
        </template>
        <template #right>
           <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn"/>
        </template>
      </van-nav-bar>
    </div>
    <!-- (重要)每个van-tab代表一个标签导航,中间夹着内容,对应的下属列表内容 -->
    <!-- Tab栏导航 -->
    <div class="main">
      <van-tabs v-model="channelId" @change="channelChangeFn" animated sticky offset-top="1.226667rem">
      <van-tab :title="obj.name"
      v-for="obj in userChannelList" :key="obj.id"
      :name="obj.id"
      >
      <ArticleList :channelId="channelId"></ArticleList>
      </van-tab>
      
</van-tabs>
<!-- 编辑频道图标 -->
<van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
    </div>
    <!--频道管理弹出层  -->
    <van-popup class="channel_popup" v-model="show" get-container="body">
      <ChannelEdit :userList="userChannelList" :unCheckList="unCheckChannelList" @addChannelEV="addChannelFn"
      @removeChannel="removeChannelFn" @closeEV="closeFn" ref="editRef" @changeChannel="changeChannelFn"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import {getUserChannelsAPI,getAllChannelsAPI,updateChannelsAPI,removeTheChannelAPI} from '@/api'

// 引入组件
import ArticleList from './components/ArticleList'
import ChannelEdit from './ChannelEdit.vue'

export default {
  data() {
    return {
      channelId: 0, // 导航栏激活索引
      userChannelList: [], // 用户选择频道列表
      allChannelList: [], // 所有频道
      // articleList: [] // 新闻列表
      show: false // 频道弹出层的显示或隐藏
    }
  },
 async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    this.userChannelList = res.data.data.channels
    // 所有频道
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
    // this.channelChangeFn()
  }, 
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
   async channelChangeFn() {
     // 新闻列表
    // const res = await getAllArticlesAPI({
    //   channel_id : this.channelId, // 先默认请求推荐频道数据
    //   timestamp: (new Date()).getTime
    // })
    // this.list = res.data.data.results
    },
    plusClickFn () {
      this.show = true
    },
    // 添加频道
   async addChannelFn(channelObj) {
      this.userChannelList.push(channelObj)
      // 问题：为何只需要push,不需要从下面数组里移除
      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj,index) => {
        const newObj = {...obj} // (浅拷贝)
        delete newObj.name
        newObj.seq = index

        return newObj // 让map方法把新对象收集起来形成一个新数组
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
  async removeChannelFn(channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index,1)

      // 调用接口
      const res = await removeTheChannelAPI({
        channelId: channelObj.id
      })
      console.log(res)
      // 删除接口返回状态码204(Not Content)无返回内容
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
      // 让内部的编辑状态回归false
      this.$refs.editRef.isEdit = false
    },
    // 切换频道
    changeChannelFn (obj) {
      this.channelId = obj.id // 传过来的频道ID,影响tabs默认 v-mode的选择
    },
    // 首页 - 右上角放大镜点击事件 -> 跳转搜索页面
    moveSearchPageFn () {
      this.$router.push('/search')
    }
  },
  // 计算属性
  computed: {
    unCheckChannelList () {
      // 目标：把所有频道数组挨个对象取出,去用户已选择数组里查找,如果找不到,则让filter方法收集到一个新数组里
     const newArr = this.allChannelList.filter(bigObj => {
        const index = this.userChannelList.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })
        // 如果找到了
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  }
}
</script>

<style scoped lang="less">
  /* 此类名是van-nav-bar组件内根标签 */
  .van-nav-bar {
    background-color: #007bff;
  }
  /* 此选择器名字是van-nav-bar组件内标签scoped尝试把此选择器后属性选择器匹配当前页面标签(选不中组件内部的) */
  // lang="less" 当前style标签内是less语法
  // /deep/ 会把属性选择器加到前面(用后代选择器的方式取款找匹配的类名)
  // 结论：要修改组件内样式,如果你用了scoped,就需要在选择器前/deep/即可
  /deep/ .van-nav-bar__title {
    color: white;
  }

  .logo {
    width: 100px;
    height: 30px;
  }

  /deep/ .van-tabs__line {
    background-color: #007bff;
  }
  .main {
    padding-top: 46px;
  }

  // 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

.channel_popup {
  width: 100vw;
  height: 100vh;
  // vw和vh是css3新出的单位,参考浏览器窗口的百分比
}
</style>